<!--
    unocss官方文档-- https://alfred-skyblue.github.io/unocss-docs-cn/
 -->
<template>
	<div class="flex flex-col items-center">
		<p
			mb15
			text-20
			font-bold
			color-gray-400
		>
			UnoCSS
		</p>
		<div class="color-purple text-30 mb-10">
			<i class="i-ic-outline-directions-car-filled hover:color-var(--main-color)" />
			<i class="i-eos-icons-loading text-green hover:color-primary"></i>
			<i class="i-icon:car?mask cursor-pointer hover:color-var(--main-color)" />
			<i class="i-icon:home?mask cursor-pointer hover:color-var(--main-color)" />
			<i class="i-icon:more cursor-pointer hover:color-#f00" />
			<i class="i-icon:loading?mask" />
		</div>
		<div class="w-150 b-(1 #f00 solid) break-all line-clamp-2 m-auto">
			111111111111111111111111111111111111111111111111111111111111
		</div>

		<c-icon
			:name="icon"
			:color="color"
			size="80"
			@click="handleIconClick"
			cursor-pointer
		/>
		<div>
			<c-icon
				name="bear"
				size="80"
			/>
		</div>

		<a-card
			class="w-100%"
			v-loading="loading"
		>
			<div
				class="h-600 overflow-auto"
				ref="warp"
			>
				<a-list
					item-layout="horizontal"
					:data-source="list"
				>
					<template #renderItem="{ item }">
						<a-list-item>
							<a-list-item-meta :description="item?.title">
								<template #title>
									{{ item.author?.loginname }}
								</template>
								<template #avatar>
									<a-avatar :src="item?.author?.avatar_url" />
								</template>
							</a-list-item-meta>
						</a-list-item>
					</template>
				</a-list>
			</div>
		</a-card>

		<div v-mask:phone="phone"></div>
		<div v-mask:name="'向敏'"></div>
		<div v-mask:idCard="430821199009052832"></div>

		<!-- 这是用类名的方式去写 -->
		<p class="bg-purple text-12 leading-12">我是store里面的内容</p>

		<!-- 按钮权限控制 -->
		<a-button
			v-auth="false"
			type="primary"
			>创建</a-button
		>

		<ReadPack @clickPack="handlePackClick" />

		<div class="color-primary">{{ authorInfo }}</div>

		<div
			v-ellipsis="4"
			w110
		>
			你好呀的啊哈哈哈 你好呀的啊哈哈哈 你好呀的啊哈哈哈 你好呀的啊哈哈哈 你好呀的啊哈哈哈 你好呀的啊哈哈哈
			你好呀的啊哈哈哈 你好呀的啊哈哈哈
		</div>

		<a-button
			:loading="testLoading"
			@click="testClick"
			>click</a-button
		>
		<a-modal
			v-model:open="open"
			title="Basic Modal"
		>
			<p>Some contents...</p>
			<p>Some contents...</p>
			<p>Some contents...</p>
		</a-modal>
	</div>
</template>
<script setup lang="ts">
import ReadPack from '@/views/ReadPack.vue'
import useScrollList from '@/views/useScrollList'
import type { ArticlDetail } from './index.d'

const warp = ref() as Ref<HTMLDivElement>
const { list, loading } = useScrollList(warp)

let icon = ref<'phone' | 'warn'>('phone')
let color = ref('var(--main-color)')

const { data: articleInfo } = useAxios<ArticlDetail>({ url: urls.fetchDetail })
const authorInfo = computed(() => articleInfo.value.author ?? {})

const { runAsync, loading: testLoading } = useAxios({
	url: urls.fetchList,
	immediate: false,
	onBefore() {
		return Promise.reject('params is bad')
	}
})

const open = ref(false)
const testClick = async () => {
	// await runAsync({ limit: 500, page: 1 })
	// message.success('request success')
	open.value = true
}

const handleIconClick = () => {
	if (icon.value === 'warn') {
		icon.value = 'phone'
		color.value = 'var(--main-color)'
	} else {
		icon.value = 'warn'
		color.value = '#f00'
	}
}

const phone = ref(15611854455)

setTimeout(() => (phone.value = 18608447800), 2000)

const handlePackClick = num => {
	// eslint-disable-next-line
	console.log(num)
}
</script>
